import { Button, Input, Table, Tag, Space, Modal, Image, Select } from "antd";
import type { ColumnsType } from "antd/es/table";
import React, { useEffect, useState } from "react";

import "@/assets/styles/Manager.scss";
import sendFetch from "@/fetch";

export default function OrderList() {
  interface DataType {
    key: number;
    order_num: string;
    user: string;
    amount: number;
    status: number;
    // 订单状态：
    // 1 下单
    // 2 支付
    // 3 发货
    // 4 收货
    // 5 过期
    pay_time: string;
    pay_type: string;
    trade_num: string;
  }

  interface Good {
    key: number;
    title: string;
    price: number;
    num: number;
  }

  const columns: ColumnsType<DataType> = [
    {
      title: "单号",
      dataIndex: "order_num",
      key: "order_num",
    },
    {
      title: "用户",
      dataIndex: "user",
      key: "user",
    },
    {
      title: "金额",
      dataIndex: "amount",
      key: "amount",
    },
    {
      title: "状态",
      key: "status",
      dataIndex: "status",
      render: (_, { status }) => {
        switch (status) {
          case 1:
            return <Tag color="default">下单</Tag>;
          case 2:
            return <Tag color="gold">支付</Tag>;
          case 3:
            return <Tag color="processing">发货</Tag>;
          case 4:
            return <Tag color="success">收货</Tag>;
          case 5:
            return <Tag color="error">过期</Tag>;
          default:
            break;
        }
      },
    },
    {
      title: "支付时间",
      dataIndex: "pay_time",
      key: "pay_time",
    },
    {
      title: "支付方式",
      dataIndex: "pay_type",
      key: "pay_type",
    },
    {
      title: "支付单号",
      dataIndex: "trade_num",
      key: "trade_num",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record: DataType) => (
        <Space size="middle">
          <a
            onClick={() => {
              sendFetch(`/manager/getOrderDetails`, { id: record.key }).then(
                (res: any) => {
                  setGL(res.data);
                  setOpen(true);
                }
              );
            }}
          >
            详细
          </a>
          {record.status == 2 ? (
            <a
              onClick={() => {
                setEOpen(true);
                setEID(record.key);
              }}
            >
              发货
            </a>
          ) : (
            <></>
          )}
        </Space>
      ),
    },
  ];

  const [data, setData] = useState<DataType[]>([]);
  const [sourcedata, setSData] = useState<DataType[]>([]);
  const [goodlist, setGL] = useState<Good[]>([]);
  const [SOrderNum, setSOrderNum] = useState("");
  const [STradeNum, setSTradeNum] = useState("");
  const [open, setOpen] = useState(false);
  const [expressOpen, setEOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [eid, setEID] = useState(0);
  const [expressType, setEType] = useState("");
  const [expressNum, setENum] = useState("");

  useEffect(() => {
    getOrderList();
  }, []);

  const getOrderList = () => {
    sendFetch(`/manager/getOrderList`).then((res: any) => {
      setSData(res.data);
      setData(res.data);
    });
  };

  const handleOk = () => {
    setOpen(false);
  };

  const handleCancel = () => {
    setOpen(false);
  };

  const expressOK = () => {
    setConfirmLoading(true)
    sendFetch(`/manager/setExpress`,{id:eid,expressType:expressType,expressNum:expressNum}).then(()=>{
        getOrderList()
        setConfirmLoading(false)
        setEOpen(false)
    })
  };

  const expressCancel = () => {
    setEOpen(false);
  };

  return (
    <div>
      <div className="OrderList-Header">
        <div style={{ display: "flex" }}>
          <div className="OrderList-Input">
            <p>订单号：</p>
            <Input
              type="text"
              value={SOrderNum}
              onChange={(e) => {
                setSOrderNum(e.target.value);
              }}
            />
          </div>
          <div className="OrderList-Input">
            <p>支付单号：</p>
            <Input
              type="text"
              value={STradeNum}
              onChange={(e) => {
                setSTradeNum(e.target.value);
              }}
            />
          </div>
        </div>
        <div>
          <Button
            onClick={() => {
              setSOrderNum("");
              setSTradeNum("");
            }}
          >
            重置
          </Button>
          <Button
            type="primary"
            style={{ margin: "0 1vw" }}
            onClick={() => {
              let t: DataType[] = [];
              sourcedata.forEach((value) => {
                if (
                  (SOrderNum == "" || value.order_num.includes(SOrderNum)) &&
                  (STradeNum == "" || value.trade_num.includes(STradeNum))
                )
                  t.push(value);
              });
              setData(t);
            }}
          >
            查询
          </Button>
        </div>
      </div>
      <div className="OrderList-Table">
        <Table columns={columns} dataSource={data} />
      </div>
      <Modal
        title="订单详细"
        open={open}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        {goodlist.map((value) => {
          return (
            <div className="OrderDetails" key={value.key}>
              <Image
                width={100}
                height={100}
                src="error"
                fallback=""
              />
              <div className="OrderDetails_detail">
                <p style={{ fontSize: "1.5em" }}>{value.title}</p>
                <p>单价：{value.price}</p>
                <p>数量：{value.num}</p>
                <p>总价：{value.price * value.num}</p>
              </div>
            </div>
          );
        })}
      </Modal>
      <Modal
        title="发货"
        open={expressOpen}
        onOk={expressOK}
        onCancel={expressCancel}
        confirmLoading={confirmLoading}
      >
        <div>
          快递类型
          <Select
            style={{ width: "100%" }}
            value={expressType}
            onChange={(value)=>{
                setEType(value)
            }}
            options={[
              {
                value: "SF",
                label: "顺丰",
              },
              {
                value: "YTO",
                label: "圆通",
              },
              {
                value: "YD",
                label: "韵达",
              },
            ]}
          />
        </div>
        <div>
          快递单号
          <Input
            value={expressNum}
            onChange={(e) => {
              setENum(e.target.value);
            }}
          />
        </div>
      </Modal>
    </div>
  );
}
